<template>
    <div class="center-map-container">
        <div ref="mapRef" class="map-container">
            <TencentMapNew
                :center="{ lat: 39.908823, lng: 116.397470 }"
                :zoom="5"
                :show-district-boundary="true"
                :enable-drag="true"
                :enable-zoom="true"
                :enable-click="true"
                :enable-double-click-zoom="true"
                :enable-scroll-wheel-zoom="true"
                :show-zoom-control="true"
                :show-zoom-level="true"
                @click="handleMapClick"
                @drag="handleMapDrag"
                @drag-start="handleMapDragStart"
                @dragging="handleMapDragging"
                @zoom="handleMapZoom"
                @ready="handleMapReady"
                @error="handleMapError"
                @district-click="handleDistrictClick"
            />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { TencentMapNew } from '@/components/tencent-map-new'

const mapRef = ref<HTMLElement>()

// 地图事件处理
function handleMapClick(clickInfo: any) {
    console.log('地图点击事件:', clickInfo)
    if (clickInfo && clickInfo.position) {
        console.log('点击位置:', `经度: ${clickInfo.position.lng}, 纬度: ${clickInfo.position.lat}`)
    }
}

function handleMapDrag(dragInfo: any) {
    console.log('地图拖拽结束:', dragInfo)
    if (dragInfo && dragInfo.center) {
        console.log('新的中心点:', `经度: ${dragInfo.center.lng}, 纬度: ${dragInfo.center.lat}`)
    }
}

function handleMapDragStart(dragInfo: any) {
    console.log('地图开始拖拽:', dragInfo)
}

function handleMapDragging(dragInfo: any) {
    console.log('地图拖拽中:', dragInfo)
    if (dragInfo && dragInfo.center) {
        console.log('当前中心点:', `经度: ${dragInfo.center.lng}, 纬度: ${dragInfo.center.lat}`)
    }
}

function handleMapZoom(event: any) {
    console.log('地图缩放事件:', event)
}

function handleMapReady(map: any) {
    console.log('地图初始化完成:', map)
}

function handleMapError(error: any) {
    console.error('地图加载错误:', error)
}

function handleDistrictClick(data: any) {
    console.log('行政区划点击事件:', data)
    if (data && data.district) {
        console.log('点击的行政区划:', data.district.name)
        console.log('点击位置:', data.position)
    }
}
</script>
<style lang="less" scoped>
    .center-map-container {
        width: 100%;
        height: 100%;
        position: relative;
        background: linear-gradient(135deg, rgba(31, 99, 163, 0.1) 0%, rgba(124, 189, 207, 0.1) 100%);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .map-container {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
    }
</style>